<page-header-wrapper [content]="phContent">
  <ng-template #phContent>
    <a href="https://ng-alain.com/chart/getting-started" target="_blank">@delon/chart</a>
  </ng-template>
  <nz-card nzTitle="Bar">
    <g2-bar height="200" [title]="'销售额趋势'" [data]="salesData"></g2-bar>
  </nz-card>
  <nz-card nzTitle="Mini Area">
    <g2-mini-area line color="#cceafe" height="45" [data]="visitData"></g2-mini-area>
  </nz-card>
  <nz-card nzTitle="图表卡片">
    <g2-card
      [title]="'销售额'"
      [bordered]="true"
      [total]="yuan(126560)"
      footer="日访问量 12,423"
      contentHeight="46"
      [action]="action"
    >
      <ng-template #action>
        <nz-tooltip [nzTitle]="'指标说明'">
          <i nz-tooltip nz-icon nzType="info-circle"></i>
        </nz-tooltip>
      </ng-template>
      周同比<trend flag="up" style="margin: 0 16px 0 8px; color: rgba(0,0,0,.85)">12%</trend> 日环比<trend
        flag="down"
        style="margin: 0 0 0 8px; color: rgba(0,0,0,.85)"
        >11%</trend
      >
    </g2-card>
    <g2-card
      [title]="'移动指标'"
      [bordered]="true"
      [total]="yuan(126560)"
      footer="日访问量 12,423"
      [avatar]="avatar"
      [action]="action"
    >
      <ng-template #avatar
        ><img style="width:56px; height: 56px" src="https://ng-alain.com/assets/img/logo-color.svg"
      /></ng-template>
      <ng-template #action>
        <nz-tooltip [nzTitle]="'指标说明'">
          <i nz-tooltip nz-icon nzType="info-circle"></i>
        </nz-tooltip>
      </ng-template>
    </g2-card>
  </nz-card>
</page-header-wrapper>
